<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-select
          v-model="getInitDate.courseClassify"
          clearable
          placeholder="课程类型"
          style="width:140px;"
        >
          <el-option
            v-for="item in dics"
            :key="item.dicCode"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-select v-model="getInitDate.status" clearable placeholder="是否上架" style="width:140px">
          <el-option
            v-for="item in status"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="getInitDate.keyword"
          placeholder="课程编号/名称"
          style="width:130px;"
          clearable
        />
        <el-button type="primary" @click="searchInfoMations">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createCourse"
        class="right"
        type="primary"
        @click="jump('create')"
      >新建课程</el-button>
    </div>
    <el-table ref="table" :data="tableData" stripe border :height="this.$getTableHeight">
      <el-table-column label="课程编号" width="100">
        <template slot-scope="scope">
          <span
            class="blue"
            @click.stop="changeActive(scope.row.id)"
          >{{ scope.row.id ? scope.row.courseNo :'&nbsp;' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="课程名称" />
      <el-table-column label="类型" width="100">
        <template slot-scope="scope">{{ scope.row.courseClassifyName }}</template>
      </el-table-column>
      <el-table-column prop="lecturerName" label="讲师" width="100" />
      <el-table-column prop="price" label="价格（元）" width="100" />
      <el-table-column prop="integra" label="观看积分" width="100" />
      <el-table-column prop="status" label="上架" width="100">
        <template
          slot-scope="scope"
        >{{ scope.row.status === 0 ? "否" :scope.row.status === 1 ? "是" :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.deleteCourse"
              class="_delete"
              @click="handleDeleteCursor(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新建课程' : '编辑课程'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <createAdver :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl'
import Pagination from '~/components/commom/pagination'
import createAdver from '~/components/course/create'
import detail from '~/components/course/detail'
import {
  getDicName,
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from '~/utils/util'
export default {
  components: {
    Pagination,
    createAdver,
    detail
  },
  data() {
    return {
      pageHeight: 0,
      dialogVisible: false,
      updateRight: false,
      active: false,
      jumpId: '',
      isCreate: false,
      accreditArr: {},
      accreditChildren: {},
      status: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      loading: true,
      input: '',
      courseClassify: [],
      lecturerId: [],
      tableData: [],
      totalCount: 0,
      dics: [],
      formInline: {
        courseClassify: '',
        courseNo: '',
        digest: '',
        flag: 0,
        integra: 0,
        label: '',
        lecturerId: '',
        name: '',
        price: '',
        sort: 0
      },
      getInitDate: {
        courseClassify: '',
        keyword: '',
        status: null
      },
      copyGetInitDate: {
        courseClassify: '',
        keyword: '',
        status: null
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      }
    }
  },
  mounted() {
    const pathStr = this.$route.path
    this.initGetDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.updateRight = !this.updateRight
      this.searchInfoMations('no')
    },
    clearJumpId() {
      this.active = false
      this.jumpId = null
    },
    openDialog() {
      this.isCreate = false
      this.dialogVisible = true
    },
    changeActive(id) {
      this.active = true
      this.jumpId = id
    },
    jump(id) {
      this.dialogVisible = true
      this.jumpId = id
      id === 'create' ? (this.isCreate = true) : (this.isCreate = false)
    },
    getDicNameInn(res) {
      const result = Object.assign({ data: this.dics }, res)
      return getDicName(result)
    },
    initGetDate(res) {
      const data = {}
      data.page = JSON.parse(JSON.stringify(this.page))
      Object.assign(data, this.getInitDate)
      this.$post({
        url: mmUrl.course.getcoursess,
        data: data
      })
        .then(res => {
          this.dics = res.dics
          this.totalCount = res.items.totalCount
          this.tableData = res.items.items
          this.loading = false
          changeTableHeight(this)
        })
        .catch(err => this.$message.error(err))
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copyGetInitDate)
      this.changeTableData(result)
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.course.getcoursess, res, that)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copyGetInitDate)
      this.changeTableData(result)
    },
    handleDeleteCursor(row) {
      const that = this
      _deleteMethods(mmUrl.course.deletecourse, row, that).then(() => {
        that.searchInfoMations('no')
      })
    },
    searchInfoMations(res) {
      this.copyGetInitDate = JSON.parse(JSON.stringify(this.getInitDate))
      const result = _searchInfo(res, this.page, this.copyGetInitDate)
      this.changeTableData(result)
    }
  }
}
</script>

<style lang='scss' module>
.randomClass {
  display: inline-block;
  margin-right: 15px;
  & > span {
    padding-right: 15px;
  }
}
</style>
